import React, { useMemo, useCallback } from "react";
import SwiperCore from "swiper";
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay } from "swiper/modules";
import Image from "next/image";
import { Brand, BrandsBlockProps } from "./type";
import { brands } from "./const";
import { globalImage } from "@/user.InterfaceLayer/constants/styles/CommonStyles";

SwiperCore.use([Autoplay]);

const BrandsBlock: React.FC<BrandsBlockProps> = () => {
  const renderSlides = useCallback((brands: Brand[]) => {
    return brands.map((brand, index) => (
      <SwiperSlide key={index}>
        <div className="w-36 h-20 mr-7">
          <Image
            className={globalImage}
            src={`/icons/brands/${brand.img}`}
            width={1960}
            height={1280}
            alt={brand.name}
            priority={true}
            quality={100}
          />
        </div>
      </SwiperSlide>
    ));
  }, []);

  const memoizedSlidesFirst = useMemo(
    () => renderSlides(brands),
    [renderSlides]
  );
  const memoizedSlidesSecond = useMemo(
    () => renderSlides(brands),
    [renderSlides]
  );

  return (
    <>
      <Swiper
        className="mb-6"
        allowTouchMove={false}
        spaceBetween={50}
        slidesPerView={6}
        speed={2000}
        loop={true}
        autoplay={{
          delay: 0,
          disableOnInteraction: false,
          reverseDirection: true,
        }}
        breakpoints={{
          320: { slidesPerView: 2, spaceBetween: 10 },
          375: { slidesPerView: 2, spaceBetween: 10 },
          425: { slidesPerView: 3, spaceBetween: 20 },
          768: { slidesPerView: 4, spaceBetween: 30 },
          1180: { slidesPerView: 5, spaceBetween: 40 },
          1200: { slidesPerView: 6, spaceBetween: 50 },
        }}
      >
        {memoizedSlidesFirst}
      </Swiper>
      <Swiper
        allowTouchMove={false}
        spaceBetween={50}
        slidesPerView={6}
        speed={2000}
        loop={true}
        autoplay={{ delay: 0, disableOnInteraction: false }}
        breakpoints={{
          320: { slidesPerView: 2, spaceBetween: 10 },
          375: { slidesPerView: 2, spaceBetween: 10 },
          425: { slidesPerView: 3, spaceBetween: 20 },
          768: { slidesPerView: 4, spaceBetween: 30 },
          1180: { slidesPerView: 5, spaceBetween: 40 },
          1200: { slidesPerView: 6, spaceBetween: 50 },
        }}
      >
        {memoizedSlidesSecond}
      </Swiper>
    </>
  );
};

export default React.memo(BrandsBlock);
